<template>
    <div id="show">
        <div style="margin-top: 20px">
            <span>拍品分类：</span>
            <el-radio-group v-model="c_def" size="medium" @change="find">
                 <el-radio-button label='全部' ></el-radio-button>
                <el-radio-button size="medium" v-for="c in classify" :key="c.type_name" :label='c.type_name' ></el-radio-button>
            </el-radio-group>
        </div>
        <div style="margin-top: 20px">
            <span>竞拍模式：</span> 
            <el-radio-group v-model="p_def" size="medium" @change="find">
                <el-radio-button label='全部' ></el-radio-button>
                <el-radio-button v-for="c in p_list" :key="c.mode" :label='c.mode' ></el-radio-button>
            </el-radio-group>
        </div>
        <div style="margin-top: 20px">
            <span>拍品状态：</span>
            <el-radio-group v-model="s_def" size="medium"  @change="find">
                <el-radio-button label='全部' ></el-radio-button>
                <el-radio-button size="medium" v-for="c in s_list" :key="c.status" :label="c.status=='SELL'?'正在拍卖':c.status=='SELL_OUT'?'已拍卖':c.status=='DOWN'?'下架':'流拍'" ></el-radio-button>
            </el-radio-group>
        </div>
        <br>
        <product :products='myPage.list' ></product>
        <el-pagination background @current-change="handleCurrentChange" 
                    :total="myPage.pagecount" :page-size="myPage.pagesize-2" layout="prev, pager, next" >
        </el-pagination>
    </div>
</template>

<script>
import product from '../views/epai_product'

  export default {
    name: 'show',
    components: {
        product
    },
    data () {
      return {
        c_def:'全部',
        p_def:'全部',
        s_def:'全部',
        classify:[{
            type_name:"手机",
        },{
            type_name:"3C数码",
        },{
            type_name:"平板电脑",
        },{
            type_name:"其他",
        },],
        p_list:[{
            mode:'会场模式',
        },{
            mode:'秒杀',
        },],
        s_list:[{
            status:"SELL",
        },{
            status:"SELL_OUT",
        },{
            status:"DOWN",
        },{
            status:"STREAMING",
        },],
        myPage: [{
            pageindex: 1,
            pagecount: '',
            pagesize: 3,
            list: [{
            }],
        }],
      };
    },
    mounted:function(){
            this.$ax.get('/epai/product/find',{params:{
                classify:this.c_def,
                p_list:this.p_def,
                s_list:this.s_def,
                pageindex:this.pageindex,
                pagecount:this.pagecount,
                pagesize:this.pagesize
            }}).then((response)=>{
                    if (response.status == 200 && response.data.success) {
                    this.myPage = response.data.data;
                }
            }).catch(error => {
                console.error(error);
            });
    },
    methods:{
        find(){
            this.$ax.get('/epai/product/find',{params:{
                classify:this.c_def,
                p_list:this.p_def,
                s_list:this.s_def=='全部'?'全部':this.s_def=='正在拍卖'?'SELL':this.s_def=='已拍卖'?'SELL_OUT':this.s_def=='下架'?'DOWN':'STREAMING',
                pageindex:this.pageindex,
                pagecount:this.pagecount,
                pagesize:this.pagesize
            }}).then((response)=>{
                 if (response.status == 200 && response.data.success) {
                    this.myPage = response.data.data;
                }
            }).catch(error => {
                console.error(error);
            });
        },
        handleCurrentChange(val) {
            this.$ax.get('/epai/product/find',{params:{
                classify:this.c_def,
                p_list:this.p_def,
                s_list:this.s_def=='全部'?'全部':this.s_def=='正在拍卖'?'SELL':this.s_def=='已拍卖'?'SELL_OUT':this.s_def=='下架'?'DOWN':'STREAMING',
                pageindex:val, 
                pagecount:this.pagecount,
                pagesize:this.pagesize
            }}).then((response)=>{
                 if (response.status == 200 && response.data.success) {
                    this.myPage = response.data.data;
                }
            }).catch(error => {
                console.error(error);
            });
            
        },
    }
  }
</script>

<style>
    *{
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
</style>